<template>
          <div class="result-item">
            <div class="result-title">API realtime result</div>
            <v-jsoneditor
              v-model="apiResult"
              v-loading="apiResultLoading"
              class="result-editor"
              :options="jsoneditorSetting.options"
              :plus="jsoneditorSetting.plus"
              :height="jsoneditorSetting.height"
              :indentation="jsoneditorSetting.indentation"
              :search="jsoneditorSetting.search"
              :path="jsoneditorSetting.path"
              :color="jsoneditorSetting.color"

            ></v-jsoneditor>
          </div>
</template>

<script>
import bus from './apitoolbus'
export default {
data() {
return {
  jsoneditorSetting: {
        options: { mode: 'tree', modes: ['tree', 'code'] },
        plus: false,
        height: '100%',
        indentation: 2,
        search: true,
        color: 'red',
        path: false
      },
    apiResultLoading: false,
    apiResult: null

}
},

created() {
  bus.$on('deleteResult', (data)=>{
    console.log(data,"result")
    this.apiResult = data
  })

},
methods: {


},
destroyed() {
  bus.$off("deleteResult");
},
}
</script>

<style scoped lang="scss">
.result-item {
  padding: 15px;
  height: 95%;
  .result-title {
    font-size: 1.3em;
    font-weight: bold;
    height: 2em;
    line-height: 2em;
  }



} 

</style>

